{% extends '_partials/index.twig' %}

{% block meta %}
    {{ parent() }}

    {% if post.meta.canonical ?? false %}
        <link rel="canonical" href="{{ post.meta.canonical }}" />
    {% else %}
        <link rel="canonical" href="https://stitcher.io{{ detailUrl ?? '/blog' }}/{{ post.id }}" />
    {% endif %}
{% endblock %}

{% block head %}
    {{ parent() }}

    {{ css.inline('resources/css/blog.scss')|raw }}
    {{ css.inline('resources/css/detail.scss')|raw }}
    {{ css.inline('resources/css/code.scss')|raw }}

    <link rel="webmention" href="https://webmention.io/stitcher.io/webmention"/>
    <link rel="pingback" href="https://webmention.io/stitcher.io/xmlrpc"/>
{% endblock %}

{% block content %}
    {% if (overviewTitle ?? null) == 'programming' %}
        {% include '_partials/ad_scout.twig' %}
    {% endif %}

{#    {% if (overviewTitle ?? null) == 'Blog for Devs' %}#}
{#        {% include '_partials/ad_kinsta.twig' %}#}
{#    {% endif %}#}

    <article class="blog">
        <aside>
            &laquo; <a href="{{ overviewUrl ?? '/' }}">back</a> — written by
            <a href="{{ post.author.url ?? 'https://twitter.com/brendt_gd' }}" target="_blank" rel="noopener noreferrer">{{ post.author.name ?? 'Brent' }}</a> on&nbsp;{{ post.date|date("F d, Y") }}
        </aside>

        {% if post.disableTitle is not defined %}
            <h1 class="{% if post.smallTitle is defined %}small-title{% endif %}">
                <span>{{ post.title }}</span>
            </h1>
        {% endif %}

        {% if post.author is defined %}
            <div class="wrapper">
                <div class="author footnotes">
                    <h2>Heads up!</h2>
                    This is a guest post, written by <a href="{{ post.author.url ?? '' }}" target="_blank" rel="noopener noreferrer">{{ post.author.name }}</a>. If you're interested in writing guest posts yourselves, you can find all information on how to <a href="/blog/guest-posts">over here</a>.
                </div>
            </div>
        {% endif %}

        {{ post.content|raw }}

        {% if post.footnotes is defined %}
            <nav class="footnotes">
                <h2>Footnotes</h2>

                {% for footnote in post.footnotes %}
                    <p>
                        <a href="{{ footnote.link }}" title="{{ footnote.title }}">{{ footnote.title }}</a>
                        {% if footnote.description is defined %}{{ footnote.description }}{% endif %}
                    </p>
                {% endfor %}
            </nav>
        {% endif %}
    </article>

    <footer>
        <nav class="spacer">
            {% if post.next.url is defined %}
                <a class="cta" href="{{ post.next.url }}">
                    {{ post.next.title }}
                </a>
            {% elseif post.next.id is defined %}
                <a class="cta" href="{{ detailUrl ?? '/blog' }}/{{ post.next.id }}">
                    Next up:&nbsp; {{ post.next.title }}
                </a>
            {% elseif _browse.next is defined %}
                <a class="cta" href="{{ detailUrl ?? '/blog' }}/{{ _browse.next.id }}">
                    Next up:&nbsp;
                    {% if _browse.next.teaserTitle is defined %}
                        {{ _browse.next.teaserTitle }}
                    {% else %}
                        {{ _browse.next.title }}
                    {% endif %}
                </a>
            {% endif %}
        </nav>

        {% include '_partials/links.twig' %}
    </footer>
{% endblock %}

{% block footer %}{% endblock %}

{% block scripts %}
    {{ parent() }}

    {% if post.disableAds is not defined or post.disableAds == false %}
        <script>
            [].forEach.call(document.querySelectorAll('.adsbygoogle'), function () {
                (adsbygoogle = window.adsbygoogle || []).push({});
            });
        </script>

{#        <script async src="/ads.js"></script>#}
    {% endif %}
{% endblock %}
